import React from 'react'

import Table from '../../components/table/Table'
import instance from '../../service/request'
import ReactDOM from 'react-dom';
import './style.css'

const customerTableHead = [
    '姓名',
    '性别',
    '民族',
    '出生日期',
    '住址',
    '身份证号码',
]

const renderHead = (item, index) => <th key={index}>{item}</th>

const renderBody = (item, index) => (
    <tr key={index}>
        <td>{item.name}</td>
        <td>{item.sex}</td>
        <td>{item.ethnicity}</td>
        <td>{item.birth}</td>
        <td>{item.address}</td>
        <td>{item.number}</td>
    </tr>
)
const uploadFile = (e) =>{
    var reader = new FileReader();
    var list = document.getElementById("list");
    var value = e.nativeEvent.srcElement.files[0];
    if(!value) return false;
    if(value.type.indexOf("image") === -1){
        alert("请上传图片")
    }
    reader.readAsDataURL(value);
    reader.onload = function(ev){
        var li = document.createElement("li");
        var img = document.createElement("img");
        img.src= ev.srcElement.result;
        img.style.width = '100%';
        img.style.height = '100%'
        li.appendChild(img);
        list.appendChild(li);
        const imgUrl = ev.currentTarget.result.split(',')[1]
        getIdMessage(imgUrl)
    }

}
const getIdMessage = async (imgUrl)=> {
    try {
        const result = await instance({
            url:'/idCardOcr',
            data:JSON.stringify({
                "image":imgUrl,
                "side": "front"
            }),
            method:'post',
            
        })
        const tableData = [result.result]
        ReactDOM.render(
            <Table limit='10'
            headData={customerTableHead}
            renderHead={(item, index) => renderHead(item, index)}
            bodyData={tableData}
            renderBody={(item, index) =>renderBody(item, index)}/>,
            document.getElementById("table_div")
          )    
        
    } catch(error){
    }
}
class IdDistinguish extends React.Component {
    state = {
        tableData:[]
    }
    componentDidMount(){
        
    }

    render() {
        // let { tableData } = this.state
        return (
            <div>
                <h2 className="page-header">
                身份证识别
                </h2>
                <div className="page-upload">
                    <div className="uploader" id="uploader">
                        <div className="uploader-img">
                            <label htmlFor="">请上传身份证人像面</label>
                            <div className="file">
                                <input type="file" accept="image/jpg" id="file" onChange={uploadFile} />
                            </div>
                        </div>
                        <div className="file-img">
                            <ul id="list"></ul>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-12">
                        <div className="card table_card">
                            <div id="table_div" className="card__body">
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

    

export default IdDistinguish
